<!--
 * @author: Goalias
 * @since: 2025-01-06
-->
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router'
import { userMonitorApi, contentMonitorApi, abilityMonitorApi } from '@/apis/MonitorApi'
import { sql } from '@/apis/types/Monitor'
import { ElMessage } from 'element-plus'
import { Timer } from '@element-plus/icons-vue'
import LineChart from '@/components/LineChart.vue';
import PulsatingButton from '@/components/ui/pulsating-button';

const route = useRoute()
const project = ref<string>(route.query.project as string)
const sqlMonitor = ref<sql>()
const loading = ref<boolean>(false)

// 初始化监控数据
function initializeMonitors(project: string) {
  loading.value = true;
  switch (project) {
    case 'user':
      userMonitorApi.getSqlMonitor().then(data => {
        sqlMonitor.value = data.data;
        loading.value = false;
      });
      break;
    case 'content':
      contentMonitorApi.getSqlMonitor().then(data => {
        sqlMonitor.value = data.data;
        loading.value = false;
      });
      break;
    case 'ability':
      abilityMonitorApi.getSqlMonitor().then(data => {
        sqlMonitor.value = data.data;
        loading.value = false;
      });
      break;
    default:
      ElMessage.warning('未知项目类型');
  }
}

// 监听路由参数的变化
watch(() => route.query.project, (newProject) => {
  project.value = newProject as string;
  initializeMonitors(project.value);
});

onMounted(() => {
  initializeMonitors(project.value);
});

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: sql
  rowIndex: number
}) => {
  if (parseInt(row.maxTimespan) > 1500) {
    return 'warning-row'
  } else if (row.lastError !== null) {
    return 'error-row'
  } else {
    return 'success-row'
  }
}

</script>

<template>
  <div class="sql-container">
    <div class="sql-header">
      <span>SQL监控</span>
      <span>所属服务：{{ project }}</span>
      <PulsatingButton pulseColor="var(--theme-color)" duration="2s" class="refresh-button" 
      @click="initializeMonitors(project)" type="button">
        刷新
      </PulsatingButton>
    </div>
    <div class="sql-body">
      <div v-if="loading">
        <el-skeleton :rows="10" />
      </div>
      <div v-else>
        <el-table :data="sqlMonitor" :border=true height="auto" :row-class-name="tableRowClassName">
          <el-table-column label="执行次数耗时分布" min-width="100" type="expand" resizable>
            <template #default="props">
              <LineChart :yData="props.row.histogram" title="执行次数耗时分布图" />
            </template>
          </el-table-column>
          <el-table-column fixed prop="sql" label="SQL" min-width="300" resizable show-overflow-tooltip />
          <el-table-column prop="executeCount" label="执行次数" resizable sortable />
          <el-table-column label="上次执行时间" min-width="150" resizable sortable>
            <template #default="scope">
              <el-icon>
                <timer />
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.lastTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fetchRowCountMax" label="查询行数" resizable sortable />
          <el-table-column prop="fetchRowCount" label="读取行数" resizable sortable />
          <el-table-column prop="maxTimespan" label="最大执行时间(ms)" resizable sortable />
          <el-table-column prop="lastSlowParameters" label="上条慢查询参数" resizable />
          <el-table-column prop="concurrentMax" label="最大并发数" resizable sortable />
          <el-table-column prop="lastError" label="最近错误信息" resizable />
          <el-table-column prop="lastErrorTime" label="最近错误时间" resizable />
          <el-table-column prop="lastErrorMessage" label="最近错误描述" resizable />
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sql-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>

